<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layouts/main_layout">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <!--<link rel="stylesheet" th:href="@{/css/plugins/markdown/editormd.css}"></link>-->

    <title>Z+ | svg转图片</title>
</head>
<body>

<div layout:fragment="main_content" class="container">

    <div class="col-md-offset-1 col-md-12">
        <div class="col-md-8">
            <h4><span style="color:#48cfad">Z+</span> SvgRender
                <small>svg渲染</small>
            </h4>
        </div>
        <div class="col-md-2">
            <!--<button class="btn btn-warning" id="md2pdf">导出pdf</button>-->
            <button class="btn btn-info" id="md2img">导出图片</button>
        </div>
    </div>

    <div class="row" id="mdEdit">
        <div class="col-md-12">
        </div>


        <div class="col-md-6" id="preData">
            <div class="col-md-12">
                <label>
                    输出图片为:
                </label>
            </div>
            <div class="col-md-offset-1 col-md-11">
                <img id="data" style="max-height:514px;width:100%"/>
            </div>
        </div>

        <div class="col-md-6">
            <div class="col-md-12">
                <label>
                    svg模板为:
                </label>
            </div>
            <div class="col-md-11">
                <textarea name="content"
                          rows="25" class="form-control"
                          id="mdContent">
<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect fill="#F7EED6" id="canvas_background" height="100%" width="100%" y="0" x="0"></rect>
      <rect fill="#ffffff" id="canvas_background" height="90%" width="94%" y="5%" x="3%"></rect>
      <text x="50%" y="80" font-size="30" text-anchor="middle"> Redis实现分布式锁相关注意事项 </text>
      <text x="75%" y="120" font-size="18" text-anchor="middle">
    -- by 一灰灰 | 2018.01.14
      </text>

      <image y="150" width="100%" height="50%" text-anchor="middle" xlink:href="http://s17.mogucdn.com/mlcdn/c45406/170418_68lkjddg3bll08h9c9bk0d8ihkffi_800x1200.jpg_468x468.jpg"></image>

</svg>

                </textarea>
            </div>
        </div>

    </div>

    <script src="/webs/assets/js/jquery-1.8.3.min.js"></script>
    <script src="/webs/assets/js/jquery.toastmessage.js"></script>
    <script src="/webs/assets/biz/svgjs.js"></script>
</div>


</body>
</html>
